<template>
    <div>
      <!-- <a-button type="primary" @click="showModal">Open Modal</a-button> -->
      <a-modal 
        v-model:visible="visible" 
        @ok="onSubmit"
        okText="提交"
        cancelText="取消"
        :width="700"
        >
        <div class="set-container">
          <a-row class="first-row">
          <a-col :span="4" class="bold-black">专业名称：</a-col>
          <a-col :span="7" >供电、变电专业</a-col>
          <a-col :span="4" class="bold-black">科室名称：</a-col>
          <a-col :span="5" >供电技术科</a-col>
        </a-row>
        <a-row class="second-row">
          <a-col :span="4" class="bold-black">机构名称：</a-col>
          <a-col :span="10">
            <a-input v-model:value=value1 :maxlength="10"/>
          </a-col>
        </a-row>
        </div>
        <a-form
            :model="formState"
            name="basic"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
            autocomplete="off"
            @finish="onFinish"
            @finishFailed="onFinishFailed"
        >
            <a-form-item
                label="车间名称"
                name="workshop_id"
                :rules="[{ required: true}]"
            >
                <a-input v-model:value="formState.workshop_id" />
            </a-form-item>
            <a-form-item
                label="班组名称"
                name="team_id"
                :rules="[{ required: true}]"
            >
                <a-input v-model:value="formState.team_id" />
            </a-form-item>
            <a-form-item
                label="绝缘工具"
                name="insulatedEquipment"
                :rules="[{ required: true }]"
            >
                <!-- <a-input v-model:value="formState.insulatedEquipment" /> -->
                <a-select
                  v-model:value="formState.insulatedEquipment"
                  style="width: 100%"
                  :options="options"
                >
              </a-select>
            </a-form-item>
            <a-form-item
                label="定额数量"
                name="count"
                :rules="[{ required: true }]"
            >
                <a-input 
                  v-model:value="formState.count" 
                  @input="intValidate(formState.count)"
                />
            </a-form-item>
            <a-form-item
                label="单位"
                name="unit"
                :rules="[{ required: true}]"
            >
              <a-select
                    v-model:value="formState.unit"
                    style="width: 100%"
                    :options="options1"
                  >
              </a-select>
                <!-- <a-input v-model:value="formState.unit" /> -->
            </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </template>
  <script setup>
  import { ref,reactive,onMounted,watch} from 'vue';
  import { Form, message } from 'ant-design-vue'
  import request from '@/utils/request'

    const intValidate=(val)=>{
      if (!(/^[0-9]{1,}$/.test(val)) && (val!=='')){
        message.info('请输入数字')
      }
      // if(!Number.isInteger(val)){
      //   message.info('请输入数字')
      // }
    }

    const useForm = Form.useForm
    const visible = ref(false);

    const props=defineProps(['setSearchValue'])

    const value1=ref('')

    // const value=ref([])
    const options = ref([
      {
        value: '验电器',
        label: '验电器',
      },
      {
        value: '110kv验电器',
        label: '110kv验电器',
      },
      {
        value: '27.5kv验电器',
        label: '27.5kv验电器',
      },
      {
        value: '10kv验电器',
        label: '10kv验电器',
      },
      {
        value: '打杂杆',
        label: '打杂杆',
      },
      {
        value: '令克棒',
        label: '令克棒',
      },
      {
        value: '接地杆',
        label: '接地杆',
      },
      {
        value: '绝缘手套',
        label: '绝缘手套',
      },
      {
        value: '绝缘靴',
        label: '绝缘靴',
      },
      {
        value: '打冰杆',
        label: '打冰杆',
      },
      {
        value: '等电位杆',
        label: '等电位杆',
      },
      {
        value: '绝缘测杆',
        label: '绝缘测杆',
      },
      {
        value: '绝缘操作手柄',
        label: '绝缘操作手柄',
      },
  ]);
  const options1=ref([
    {
      value: '个',
      label: '个',
    },
    {
      value: '双',
      label: '双',
    },
    {
      value: '节',
      label: '节',
    },
  ])

    watch(
      [
        ()=>props.setSearchValue
      ],()=>{
        value1.value=props.setSearchValue
    })

    const emit=defineEmits(['loadData'])
    const showModal = () => {
        visible.value = true;
      };
      const handleOk = e => {
        // console.log(e);
        visible.value = false;
      };

      const formState = reactive({
        workshop_id: '',
        team_id:'',
        insulatedEquipment:'',
        count: '',
        unit: '',
      });

      const {
      resetFields,
      validate,
      validateInfos,
    } = useForm(formState, reactive({
      workshop_id: [{
        required: true,
        message: 'Please input workshop_id',
      }],
      team_id: [{
        required: true,
        message: 'Please input team_id',
      }],
      insulatedEquipment: [{
        required: true,
        message: 'Please input insulatedEquipment',
      }],
      count: [{
        required: true,
        message: 'Please input count',
      }],
      unit: [{
        required: true,
        message: 'Please input unit',
      }],
    }));

    const onSubmit = () => {
      validate().then(() => {
        request({
            url:'/feathers/gd-quota-process',
            data:{
                ...formState,
            },
            method:'post'
        }).then((res)=>{
            formState.workshop_id=''
            formState.team_id=''
            formState.insulatedEquipment=''
            formState.count=''
            formState.unit=''
            visible.value=false
            emit('loadData')
        })
        
      }).catch(err => {
        console.log(111111)
        console.log('error', err);
      });
    };

    const reset = () => {
      resetFields();
    };

        const onFinish = values => {
        console.log('Success:', values);
        };
        const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
        };

      defineExpose({
        showModal
      })
  </script>
  <style scoped>
  .set-container{
    height: 80px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
    width: 100%;
  }
  .set-container .first-row{
    height: 50%;
  }
  </style>